
import React from 'react';
import { Menu, Icon } from 'antd';
import listBody from '../../assets/list.json'
import './list.css';
import Serch from '../serch/serch'
const SubMenu = Menu.SubMenu;
console.log('listBody', listBody.body)
export default class Sider extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.filterList = this.filterList.bind(this);
  }
  // submenu keys of first level
  rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

  state = {
    openKeys: ['sub1'],
    menu: listBody.body,
    selectedKeys:['0']
  };

  onOpenChange = openKeys => {
    const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      this.setState({ openKeys });
    } else {
      this.setState({
        openKeys: latestOpenKey ? [latestOpenKey] : [],
      });
    }
  };
  handleClick(e) {
    // console.log(e);
    // console.log('listBody.pageUrl', listBody.body[e.key])
    // console.log('this', this.props)
    this.props.subInfo(listBody.body[e.key])
    this.setState({
      selectedKeys:[e.key]
    })
  }
  filterList(value){
    console.log('value',value)
    var new_listBody= listBody.body.filter(val=>{
      // return val.name ===value
      return val.name.indexOf(value) !== -1 
    });
    console.log('new_listBody',new_listBody)
    this.setState({
      menu:new_listBody,
      selectedKeys:['0']
    })
  }
  render() {
    return (
      <div className="menuList">
      <Serch subSerch={this.filterList}/>
        <Menu
          onClick={this.handleClick}
          mode="inline"
          openKeys={this.state.openKeys}
          onOpenChange={this.onOpenChange}
          // style={{ width: 256 }}
          selectedKeys={this.state.selectedKeys}
        >
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="mail" />
                <span>商品</span>
              </span>
            }
          >
            {this.state.menu.map((todo, index) => {
              if (todo.classify === 'product') {
                return <Menu.Item key={index}>{todo.name}</Menu.Item>
              } else {
                return null
              }
            })}
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="appstore" />
                <span>活动</span>
              </span>
            }
          >
            {this.state.menu.map((todo, index) => {
              if (todo.classify === 'activity') {
                return <Menu.Item key={index}>{todo.name}</Menu.Item>
              } else {
                return null
              }
            })}
          </SubMenu>
          <SubMenu
            key="sub4"
            title={
              <span>
                <Icon type="setting" />
                <span>其他</span>
              </span>
            }
          >
            {this.state.menu.map((todo, index) => {
              if (todo.classify === 'more') {
                return <Menu.Item key={index}>{todo.name}</Menu.Item>
              } else {
                return null
              }
            })}
          </SubMenu>
        </Menu>
      </div>
    );
  }
}